<script setup lang='ts'>
import { ref } from 'vue';
import { useRoute } from 'vue-router'; 
import { storeToRefs } from 'pinia'
import {useConfigStore} from '@/store/config'
const configStore=useConfigStore()
const {setTheme, setSize, size, setLanguage}=configStore
const {theme}=storeToRefs(configStore)
const testReactiveObj=reactive({
  x:1,
  y:200
})

let {x}=testReactiveObj;
const {y}=toRefs(testReactiveObj)

const changeX=()=>{
  console.log(x);
  console.log(y);  
  x=300;
  y.value=700
  console.log(x); 
  console.log('theme',theme);
  
}

const route=useRoute()
const changeLanguage=(language)=>{
  setLanguage(language,route.meta?.title)
}

const count=ref(100)
const globalVar=ref(GLOBAL_VAR)


</script>
<template>
  <div class="scroll-y">
    <h1>x ={{testReactiveObj.x}},,,,y={{testReactiveObj.y}}</h1>
    <el-button @click="changeX">changeX()</el-button>
    <div v-lang class='mt-10px mb-10px font-bold'>switch theme</div>
      <el-button @click="setTheme('base-theme')">base-theme(default)</el-button>
      <el-button @click="setTheme('lighting-theme')">lighting-theme</el-button>
      <el-button @click="setTheme('china-red')">china-red</el-button>
      <el-button @click="setTheme('dark')">dark</el-button>
    
    <div v-lang class='mt-10px mb-10px font-bold'>switch size</div>
      <div>
        <el-button v-lang  @click="setSize('large')">large</el-button>
        <el-button @click="setSize('default')">default</el-button>
        <el-button @click="setSize('small')">small</el-button>
      </div>

      <div v-lang class="mt-10px mb-10px font-bold">switch language</div>
        <el-button @click="changeLanguage('en')">en</el-button>
        <el-button @click="changeLanguage('zh')">zh</el-button> 
      
         <!--example components -->
      <div v-lang class="mb-10px font-bold mt-20px">Button Group</div>
      <el-button type="primary" @click="count++">count is: {{ count }}</el-button>
      <el-button type="success" @click="count++">count is: {{ count }}</el-button>
      <el-button type="warning" @click="count++">count is: {{ count }}</el-button>
      <el-button type="danger" @click="count++">count is: {{ count }}</el-button>
      <el-button type="info" @click="count++">count is: {{ count }}</el-button>

      <div v-lang class="mt-30px font-bold mb-10px">unocss using</div>
      <div class="mb-40px w-900px h-10px text-16px">
        <div>
          you can look
          <el-link class="text-red" href="https://uno.antfu.me/" target="_blank">https://uno.antfu.me/</el-link>
          to search you need such as "margin-left:10px" and then get the shortcut(ml-10px)
        </div>
      </div>

      <div v-lang class="mt-30px font-bold mb-10px">global var</div>
      {{ globalVar }}

      <el-input v-lang   placeholder="switch theme" />
  </div>
</template>
<style lang='scss' scoped>
    
</style>